<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">全院人事概览</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text" @click="goToHomePage">返回首页</span>
              <span class="text" @click="goToFenYangPersonnePage">汾阳</span>
              <span class="text" @click="goToPuJiangPersonnePage">浦江</span>
            </div>
            <div class="react-left ml-3" style=" width:260px;">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3" style="background-color: #0f1325;width:250px;" > 
              <span class="text fw-b">{{ subtitle[2]}}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>
        <div class="body-box">
          <div class="content-box">
            <div class="up">
        <div
                class="bg-color-black item"
                v-for="item in titleItem"
                :key="item.title"
            >
                <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
                <dv-digital-flop class="dv-dig-flop ml-1 mt-1 pl-3" :config="item.config" />
            </div>
        </div>
            <div class="Piechart">
              <EntireHospitalPieView class="EntireHospitalPieView"
              v-for="index in 4"
              :key="index"
              :title="getPieTitle(index)"
              :PieIndex=index
              />
            </div>
             <div class="Linechart">
              <EntireHospitalLinechartView class=""
              v-for="index in 4"
              :key="index"
              :title="getLineTitle(index)"
              :PieIndex=index
              />
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { formatTime } from "@/utils/index";
import { WEEK } from "@/constant/index";
import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/index";
import { RouterLink, RouterView } from "vue-router";
import EntireHospitalPieView from "@/views/NurseStaffInformation/EntireHospital/index.vue";
import EntireHospitalLinechartView from "@/views/NurseStaffInformation/EntireHospital/Linechart.vue";
export default defineComponent({
  components: {
    EntireHospitalPieView,
    EntireHospitalLinechartView
  },
  setup() {
    // * 颜色
    const decorationColors = ["#568aea", "#000000"];
    // * 加载标识
    const loading = ref<boolean>(true);
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
    });
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    // 生命周期
    onMounted(() => {
      cancelLoading();
      handleTime();
      // todo 屏幕适应
      windowDraw();
      calcRate();
      setData();
    });

    onUnmounted(() => {
      unWindowDraw();
      clearInterval(timeInfo.setInterval);
    });

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    };

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date();
        timeInfo.dateDay = formatTime(date, "HH: mm: ss");
        timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
        timeInfo.dateWeek = WEEK[date.getDay()];
      }, 1000);
    };

//将数字转换为中文数字
const getPieTitle = (num: number) => {
      let result = "";
      switch (num) {
        case 1:
          result = "学历(全院)";
          break;
        case 2:
          result = "职级(全院)";
          break;
        case 3:
          result = "能级(全院)";
          break;
        case 4:
          result = "工作年限(全院)";
          break;
        default:
          result = "";
          break;
      }
      return result;
    };

    const getLineTitle = (num: number) => {
      let result = "";
      switch (num) {
        case 1:
          result = "学历走势";
          break;
        case 2:
          result = "职级走势";
          break;
        case 3:
          result = "能级走势";
          break;
        case 4:
          result = "工作年限走势";
          break;
        default:
          result = "";
          break;
      }
      return result;
    };
    
    const titleDate = [
      {
        number: '100',
        text: '护士总数'
      },
      {
        number: '100',
        text: '科片护士数'
      },
      {
        number: '100',
        text: '当前在岗人数'
      },
      {
        number: '100',
        text: '今日在岗人数'
      },
      {
        number: '100',
        text: '休息'
      },
      {
        number: '100',
        text: '病假'
      },
      {
        number: '100',
        text: '实习'
      },
      {
        number: '100',
        text: '进修人数'
      }
    ]
    const titleItem = reactive([])
    // 设置数据
    const setData = () => {
      titleDate.map(e => {
        titleItem.push({
          title: e.text,
          config: {
            number: [e.number],
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        })
      })
    }
    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      getPieTitle,
      getLineTitle,
      titleItem,
    };
  },
  methods: {
    goToHomePage() {
      this.$router.push({ name: "Index" });
    },goToFenYangPersonnePage()
    {
      this.$router.push({ name: "FenYangPersonne" });
    },
    goToPuJiangPersonnePage()
    {
      this.$router.push({ name: "PuJiangPersonne" });
    }
  },
});
</script>
  
  <style lang="scss" scoped>
@import "../NurseStaffInformation/NurseStaffInformationCSS/index.scss";

.up {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
       padding-top: 20px;
       width:12%;
       height:100%;
       p
       {
        width:50%;
        height:98%;
        display:inline-block;
        text-align: center;
        line-height:70px;
        float:left;
        font-size:18px;
       }
      .dv-dig-flop {
        display:inline-block;
        width:35%;
        height:90%;
        margin-bottom:50px;
      }
    }
  }
</style>
  